<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>消息气泡</title>
    </head>

    <style>
        .message1,.message2 {
            width: 200px;
            height: 80px;
            margin: 100px auto;
            background-color: green;
            border-bottom-color:green;/*为了给after伪元素自动继承*/
            color: #fff;
            font-size: 12px;
            font-family: Arial;
            line-height: 18px;
            padding: 10px 12px 10px 12px;
            box-sizing: border-box;
            border-radius: 6px;
            position: relative;
            word-break: break-all;
            }

            .message1::before {
                content: '';
                width: 20px;
                height: 20px;
                background-color: inherit;
                left: -10px;
                position: absolute;
                transform: rotate(45deg);
                top:50%;
                margin-top: -5px;
            }

            .message2::after {
                content: '';
                position: absolute;
                width: 20px;
                height: 20px;
                right: -24px;
                top: 0px;
                border-width: 0 0 20px 20px;
                border-style: solid;
                border-left-color: transparent;
                border-bottom-color:inherit;
                border-bottom-right-radius: 60px;
            } 
    </style>

    <body>
        <!-- <div class="message1">
            Demos 代码演示、代码片段 - 读你，欢迎来到读你，http://dunizb.com/demo/
        </div> -->
        
        <div class="message1">
            Demos 代码演示、代码片段 - 读你，欢迎来到读你，http://dunizb.com/demo/
        </div>

        <div class="message2">
                Demos 代码演示、代码片段 - 读你，欢迎来到读你，http://dunizb.com/demo/
        </div>
    </body>
</html>